<template>
  <!-- <div> -->
  <a-card title="切换网络状态显示">
    <a-descriptions size="middle" :column="2" bordered style="box-sizing: border-box;">
      <a-descriptions-item label="控制模式">
        {{ desData.controlModel == '0' ? '本控' : desData.controlModel == '1' ? '远控' : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="主备切换">
        {{ desData.primaryBackup == '0' ? '主份' : desData.primaryBackup == '1' ? '备份' : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="控制方式">
        {{ desData.controlMode == '0' ? '手动' : desData.controlMode == '1' ? '自动' : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="设备状态">
        {{ desData.equipmentStatus == '0' ? '正常' : desData.equipmentStatus == '1' ? '异常' : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="设备温度">
        {{ desData.temperature ? desData.temperature + '℃' : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="TCP端口">
        {{ desData.tcpPort ? desData.tcpPort : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="IP地址">
        {{ desData.IPaddress ? desData.IPaddress : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="网关">
        {{ desData.gateway ? desData.gateway : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="子网掩码">
        {{ desData.subnetMask ? desData.subnetMask : '/' }}
      </a-descriptions-item>
      <a-descriptions-item label="MAC地址">
        {{ desData.MACaddress ? desData.MACaddress : '/' }}
      </a-descriptions-item>
    </a-descriptions>

    <a-form-model v-if="false" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row style="display: flex;">
        <a-card title="设备状态" style="width:50%">
          <a-col :span="24">
            <a-form-model-item label="片内温度(0.01℃)">
              <a-input v-model="formData.Temperature" /> </a-form-model-item
          ></a-col>
          <a-col :span="24">
            <a-form-model-item label="片内电压(10mV)">
              <a-input v-model="formData.voltage" /> </a-form-model-item
          ></a-col>
        </a-card>
        <a-card title="数据收发计数" style="width:50%">
          <a-col :span="24">
            <a-form-model-item label="接收数据包数量">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="发送数据包数量">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
        </a-card>
      </a-row>
      <a-row style="display: flex;">
        <a-card title="工作模式" style="width:100%">
          <a-col :span="24">
            <a-form-model-item label="上行工作模式">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="下行工作模式">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
        </a-card>
        <a-card title="频率模式" style="width:100%">
          <a-col :span="24">
            <a-form-model-item label="上行频率模式">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="下行频率模式">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
        </a-card>
      </a-row>
      <a-row>
        <a-card title="下行状态数据显示">
          <a-col :span="12">
            <a-form-model-item label="下行锁定跟踪状态">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="下行载频偏差(Hz)">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="下行信道信号噪声(dBm)">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="下行信道信号功率(dBm)">
              <a-input v-model="formData.num"></a-input>
            </a-form-model-item>
          </a-col>
        </a-card>
      </a-row>
    </a-form-model>
  </a-card>
  <!-- </div> -->
</template>

<script>
import { mapGetters } from 'vuex'
import { getAction, httpAction } from '@/api/manage'
export default {
  // name: 'baseConfig',
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    }
  },
  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        console.log(msg, '-----websocket的数据')
        if (msg.cmd == 'kgwl_sx') {
          this.getData()
        }
      }
    }
  },
  data() {
    return {
      formData: {},
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      desData: {},
      url: {
        getByChannelCode: '/attr/nmcAttr/getByChannelCode'
      },
      options: [
        { resKey: 'tcpdk', webKey: 'tcpPort', label: 'TCP端口' },
        { resKey: 'ipdz', webKey: 'IPaddress', label: 'IP地址' },
        { resKey: 'wg', webKey: 'gateway', label: '网关' },
        { resKey: 'zwym', webKey: 'subnetMask', label: '子网掩码' },
        { resKey: 'macdz', webKey: 'MACaddress', label: 'MAC地址' },
        { resKey: 'ybk', webKey: 'controlModel', label: '控制模式' },
        { resKey: 'zbqh', webKey: 'primaryBackup', label: '主备份切换' },
        { resKey: 'kzfs', webKey: 'controlMode', label: '控制方式' },
        { resKey: 'sbzt', webKey: 'equipmentStatus', label: '设备状态' },
        { resKey: 'sbwd', webKey: 'temperature', label: '设备温度' }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let temp = {
        channelCode: '开关网络'
      }
      getAction(this.url.getByChannelCode, temp).then(res => {
        if (res.success) {
          res.result.forEach(i => {
            let key = this.options.find(j => j.resKey == i.attrName).webKey
            this.$set(this.desData, key, i.parseValue)
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.ant-card-bordered {
  height: 100%;
  overflow: auto;
}
</style>
